<!DOCTYPE html>
<html lang="en">
<head th:include="aHomeProducts/include :: header"></head>
<body>

<style>
    .el-container {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .el-menu {
        overflow: hidden;
    }
    .el-aside{
        overflow: hidden;
    }
    .mylogin {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .myElMenu {
        height: calc(100% - 100px);
        width: calc(100% - 1px);
        overflow: auto;
    }

    .mytitleI {
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
    }

    .el-main {
        padding: 0;
        margin: 0;
    }

    .J_iframe {
        width: 100%;
        height: calc(100% - 5px);
        margin: 0;
        padding: 0;
        border: 0;
    }
    .el-header{
        display: flex;
        align-items: center;
    }
    .myopenIco{
        font-size: 50px;
    }
    .myopenIco:hover{
        cursor: pointer;
    }
</style>
<div id="app">
    <el-container>
        <el-aside :width="!isCollapse?'200px':'55px'">
            <div class="mylogin">
                <img alt="image" class="img-circle" height="55"
                     width="55" :src="picUrl"/></span>
                <h3 :style="{'margin': '4px','display':isCollapse?'none':'block'}">
                    </i>到家产品管理后台
                </h3>
            </div>
<!--            :collapse="isCollapse" 有一个内存泄露问题-->
            <el-menu   :default-active="active" class="myElMenu" @select="menuSelect">
                <el-menu-item index="/main">
                    <i class="mytitleI fa fa-home"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <template v-for="(item,index) in menu" :key="item.index">
                    <el-menu-item v-if="item.children.length==0"
                                  :index="item.attributes.url!=''? item.attributes.url:item.id">
                        <i :class="'fa fa fa-bar-chart-o '+item.attributes?.icon"></i>
                        <span slot="title">{{item.text}}</span>

                    </el-menu-item>

                    <el-submenu v-else :key="item.id" :index="item.attributes.url!=''? item.attributes.url:item.id">
                        <template slot="title">
                            <i :class="'mytitleI fa fa fa-bar-chart-o '+item.attributes?.icon"></i>
                            <span slot="title">{{item.text}}</span>
                        </template>
                        <el-menu-item v-for="(child, childIndex) in item.children" :key="childIndex"
                                      :index="child.attributes.url!=''? child.attributes.url:child.id">
                            <template slot="title">
                                <i :class="'fa fa fa-bar-chart-o '+child.attributes?.icon"></i>
                                <span slot="title">{{child.text}}</span>
                            </template>

                        </el-menu-item>
                    </el-submenu>
                </template>

            </el-menu>
        </el-aside>
        <el-container>
            <el-header height="100px">
                <i :class="!isCollapse?'myopenIco el-icon-s-fold':'myopenIco el-icon-s-unfold'" @click="chageCollapse"></i>
            </el-header>
            <el-main>
                <iframe class="J_iframe" :src="path"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
<div th:include="aHomeProducts/include :: footer"></div>
<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: {
            menu: [[${menus}]],
            name: [[${name}]],
            username: [[${username}]],
            picUrl: [[${picUrl}]],
            mpList: [[${mpList}]],
            path: '/main',
            active: '/main',
            isCollapse:false
        },
        mounted() {
            console.log('===', this.menu)

        },
        methods: {
            menuSelect(index, indexPath) {
                this.path = index
                this.active = index
                console.log('index', index, indexPath)
            },
            chageCollapse(){
                this.isCollapse=!this.isCollapse
                console.log('isCollapse',this.isCollapse)
            }
        }
    })
</script>
</body>
</html>
